<template>
    <main>
        <h2>个人设置</h2>
        <ul>
            <li
                v-for="(v, index) of toggle_data"
                :key="v.title"
                @click="
                    toggle(index);
                    toUpdate(v.routerPath);
                "
                :class="v.show"
            >
                {{ v.title }}
            </li>
        </ul>
        <router-view></router-view>
    </main>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
    name: "Set",
    setup() {
        const router = useRouter();

        // 选项卡功能
        const toggle_data = reactive([
            { title: "基本设置", show: "active", routerPath: 'update' },
            { title: "绑定设置", show: "", routerPath: 'list' },
            { title: "隐私设置", show: "", routerPath: 'setting' },
        ]);
        const toggle = (index) => {
            toggle_data.forEach((item, i) => {
                if (i === index) {
                    item.show = "active";
                } else {
                    item.show = "";
                }
            });
        };

        // 跳转
        const toUpdate = (name) => {
            router.push({ name });
        };

        return {
            toggle_data,
            toggle,
            print,
            toUpdate,
        };
    },
};
</script>

<style lang='less' scoped>
main {
    padding: 20px 68px;
    width: 844px;
    border-left: 1.5px solid #e6e6e6;
    border-right: 1.5px solid #e6e6e6;
    margin: 0 auto;
    h2 {
        font-weight: 500;
    }
    ul {
        margin-top: 10px;
        height: 40px;
        border: 1px solid #ccc;
        border-top: 2px solid #ccc;
        box-sizing: border-box;
        background: linear-gradient(
            to bottom,
            rgb(245, 245, 245),
            rgb(238, 237, 237),
            rgb(241, 241, 241)
        );
        cursor: pointer;
        li {
            float: left;
            width: 150px;
            height: 40px;
            line-height: 36px;
            text-align: center;
            box-sizing: border-box;
            transform: translate(-1px, -2px);
            border-top: 2px solid #ccc;
            font-size: 15px;
            color: rgb(71, 71, 71);
            &:hover {
                border-top: 2px solid #e03a24;
            }
        }
        .active {
            border-top: 2px solid #e03a24;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            background-color: white;
        }
    }
}
</style>